<template>
    <div class="video-wraper" :style="{width: width + 'px', height: height + 'px'}" @click="onShowVideo">
        <video :src="videoCover" class="small-video"></video>
        <div class="shadow pointer"></div>
        <el-icon class="icon-play pointer"><VideoPlay /></el-icon>
        <slot></slot>
    </div>
    <FullVideo v-model:show="showVideo" :video-url="videoUrl" :video-list="videoList"/>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import FullVideo from './FullVideo.vue'
const props = defineProps({
    videoUrl: {
        type: String
    },
    videoList: {
        type: Array
    },
    width: {
        type: Number,
        default: 90
    },
    height: {
        type: Number,
        default: 68
    }
})
let showVideo = ref(false)

const videoCover = computed(() => {
    return props.videoUrl || props.videoList?.[0]
})

const onShowVideo = () => {
    showVideo.value = true
}
</script>
<style lang="stylus" scoped>
.video-wraper {
    position: relative;
    border-radius: 4px;
    border: 1px solid #fff;
    .small-video {
        width: 100%;
        height: 100%;
    }
    .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .icon-play {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .video {
        position: absolute;
    }
}
.shadow-box {

}
</style>
